<template>
    <div v-loading="loading" @wheel="handelWheel" ref="main" class="main-container">
      <div  @click="switchTo(index-1)" v-show="index > 0" class="icon icon-up">
        <Icon type="arrowUp"></Icon>
      </div>
<!--      轮播图-->
      <div @transitionend="handleTransitionEnd" class="carousel-list" :style="{marginTop}">
        <div  v-for="item in record" :key="item.id" class="carousel-item">
        <carousel :carouselItem="item"></carousel>
        </div>
      </div>
      <div @click="switchTo(index+1)" v-show="index < record.length-1" class="icon icon-down">
        <Icon type="arrowDown"></Icon>
      </div>

<!--      指示器-->
      <div class="indicator">
        <i @click="switchTo(i)" v-for="(item,i) in record" :key="item.id" :class="index === i? 'active':''"></i>
      </div>
    </div>
</template>

<script>
// import { getBanner } from '../../api/index'
import carousel from './Carouselitem'
import Icon from '@/components/Icon/'
// import fetchData from '../../mixins/fetchData'
import { mapState } from 'vuex'
export default {
  // mixins: [fetchData([])], // 公共逐渐提供数据record和isLoading加载项
  name: 'index',
  components: {
    carousel,
    Icon
  },
  created () {
    this.$store.dispatch('banner/fetchBanner')
  },
  mounted () {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  destroyed () {
    window.removeEventListener('resize', this.handleResize)
  },
  data () {
    return {
      wheel: false,
      mainHeight: 0, // 容器高度
      index: 0 // 当前显示的第几张轮播图
    }
  },
  computed: {
    marginTop () {
      return -this.index * this.mainHeight + 'px'
    },
    ...mapState('banner', ['loading', 'record'])
  },
  methods: {
    switchTo (i) {
      if (i < 0 || i > this.record.length - 1) {
        return
      }
      this.index = i
    },
    handelWheel (e) {
      if (this.wheel) {
        return
      }
      if (e.deltaY < -5 && this.index > 0) {
        this.wheel = true
        this.index--
      } else if (e.deltaY >= 5 && this.index < this.record.length - 1) {
        this.wheel = true
        this.index++
      }
    },
    handleTransitionEnd () {
      this.wheel = false
    },
    handleResize () {
      this.mainHeight = this.$refs.main.clientHeight
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/mixin";
  @import "../../styles/var";
  @gap:15px;
.main-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
/*  图片*/
  .carousel-list{
    width: 100%;
    height: 100%;
    transition: .5s;
    .carousel-item{
      width: 100%;
      height: 100%;
    }
  }
/*  图标*/
  .icon{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: @gray;
    cursor: pointer;
    z-index: 20;
    &.icon-up{
      top: @gap;
      animation:  jump-up 2s infinite;
    }
    &.icon-down{
      top: auto;
      bottom: @gap;
      animation:  jump-down 2s infinite;
    }
    @jump:5px;
    @keyframes jump-up {
      0%{
        transform: translate(-50%,@jump);
      }
      50%{
        transform: translate(-50%,-@jump);
      }
      100%{
        transform: translate(-50%,@jump);
      }
    }
    @keyframes jump-down {
      0%{
        transform: translate(-50%,-@jump);
      }
      50%{
        transform: translate(-50%,@jump);
      }
      100%{
        transform: translate(-50%,-@jump);
      }
    }
  }
/*  指示器*/
  .indicator{
    .self-center();
    transform: translateY(-50%);
    left: auto;
    right: 20px;
    i{
      display: block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 1px solid #ffffff;
      margin-top: 5px;
      background-color: @words;
      cursor: pointer;
      box-sizing: border-box;
      transition: 0.5s;
    }
    .active{
      background-color: #ffffff;
    }
  }
}
</style>
